<template>
  <div class="container" v-loading="loading">
    <div style="padding: 0px 20px">
      <VolHeader icon="md-apps" text="" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div style="display: flex">
            <Input style="width: 150px; margin-right: 10px" v-model.number="params.orderid"
              placeholder="凭证号" />
            <Input style="width: 150px; margin-right: 10px" v-model.number="params.note"
              placeholder="备注" />
            <DatePicker style="width: 150px" type="date" placeholder="入账日期"
              v-model="params.datetime"></DatePicker>
            <Select style="width: 100px; margin-left: 10px" clearable v-model="params.functype"
              placeholder="类型">
              <Option value="11">充值</Option>
              <Option value="12">消费</Option>
              <Option value="13">退款</Option>
              <Option value="14">增加授信</Option>
              <Option value="15">减少授信</Option>
              <Option value="2">转账</Option>
              <Option value="21">转出</Option>
              <Option value="22">转入</Option>
              <Option value="3">调整</Option>
              <Option value="4">冲账</Option>
              <Option value="17">待审核</Option>
              <Option value="18">已审核</Option>
            </Select>

            <Button type="info" ghost @click="searchClick" style="margin-left: 20px">查询</Button>
            <Button type="info" ghost @click="resetSearch" style="margin-left: 20px">重置</Button>
          </div>
        </slot>
      </VolHeader>

      <!-- table数据 -->
      <!-- :max-height="450" -->
      <vol-table ref="table" :columns="columns" :tableData="tableData" :height="400"
        :paginationHide="false"></vol-table>
      <div class="paginat">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="[30, 60, 90]" :page-size="params.count"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <vol-box :model.sync="modelExamine" title="查看" :width="600" :height="400">
      <VolForm ref="myform" :formFileds="formFiledsvk" :formRules="formRulessvk" :labelWidth="100">
      </VolForm>
      <div slot="footer">
        <Button size="small" type="info" @click="modelExamine = false">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolHeader from "@/components/basic/VolHeader.vue";
import VolForm from "@/components/basic/VolForm.vue";
import VolBox from "@/components/basic/VolBox.vue";
import moment from "moment";
export default {
  components: { VolTable, VolHeader, VolForm, VolBox },
  props: {
    isSingle: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formFiledsvk: {
        createDate: "",
        internal_id_fk: "",
        type_func: "",
        amount_total: "",
        balance: "",
        customer_name: "",
        customer_phone: "",
        creator: "",
        out_order_id: "",
        notes: "",
      },
      formRulessvk: [
        [
          {
            title: "入账日期",
            field: "createDate",
            type: "datetime",
            readonly: true,
          },
          {
            title: "流水单号",
            field: "internal_id_fk",
            type: "text",
            readonly: true,
          },
        ],
        [
          {
            title: "类型",
            field: "type_func",
            type: "selcet",
            dataKey: "",
            data: [
              { key: 11, value: "充值" },
              { key: 12, value: "消费" },
              { key: 13, value: "退款" },
              { key: 14, value: "增加授信" },
              { key: 15, value: "减少授信" },
              { key: 2, value: "转账" },
              { key: 21, value: "转出" },
              { key: 22, value: "转入" },
              { key: 3, value: "调整" },
              { key: 4, value: "冲账" },
              { key: 17, value: "待审核" },
              { key: 18, value: "已审核" },
            ],
            readonly: true,
          },
          {
            title: "订单金额",
            field: "amount_total",
            type: "text",
            readonly: true,
          },
        ],
        [
          { title: "可用余额", field: "balance", type: "text", readonly: true },
          {
            title: "凭证号",
            field: "out_order_id",
            type: "text",
            readonly: true,
          },
        ],
        [
          {
            title: "客户姓名",
            field: "customer_name",
            type: "text",
            readonly: true,
          },
          {
            title: "客户手机号",
            field: "customer_phone",
            type: "text",
            readonly: true,
          },
        ],
        [
          { title: "操作人", field: "creator", type: "text", readonly: true },
        ],
        [
          { title: "备注", field: "notes", type: "text", readonly: true,colSize: 12 },
        ],
      ],
      modelExamine: false,
      // 加载
      loading: true,
      //  分页
      currentPage: 1, // 当前页数
      total: 0, // 总条数
      //查询条件字段
      params: {
        orderid: "", //订单号
        note: "", //备注
        datetime: "", //入账日期
        functype: "", //类型

        acccode: "", //应收账户编码
        start: 0, //起始下标
        count: 30, //请求条数
      },
      // 列表数据
      tableData: [],
      viewModel: false, //点击单元格时弹出框
      columns: [
        {
          field: "account_alias",
          title: "应收账户编号",
          bind: { key: "creditedtype", data: [] },
          type: "string",
          width: 220,
          align: "left",
          hidden: true,
          sortable: true,
        },
        {
          field: "createDate",
          title: "入账日期",
          type: "datetime",
          width: 190,
          align: "left",
          // sortable: true,
        },
        {
          field: "internal_id_fk",
          title: "流水单号",
          type: "int",
          width: 250,
          readonly: true,
          align: "left",
        },
        {
          field: "type_func",
          title: "类型",
          type: "string",
          width: 100,
          align: "left",
          bind: {
            key: "audit",
            data: [
              { key: 11, value: "充值" },
              { key: 12, value: "消费" },
              { key: 13, value: "退款" },
              { key: 14, value: "增加授信" },
              { key: 15, value: "减少授信" },
              { key: 2, value: "转账" },
              { key: 21, value: "转出" },
              { key: 22, value: "转入" },
              { key: 3, value: "调整" },
              { key: 4, value: "冲账" },
              { key: 17, value: "待审核" },
              { key: 18, value: "已审核" },
            ],
          },
        },
        {
          field: "amount_total",
          title: "订单金额",
          type: "int",
          width: 100,
          align: "left",
          // summary: true,
        },
        {
          field: "balance",
          title: "可用余额",
          type: "int",
          width: 100,
          align: "left",
          // summary: true,
        },
        {
          field: "out_order_id",
          title: "凭证号",
          type: "string",
          width: 180,
          align: "left",
          // fixed: "left",
        },
        // {
        //   field: "amount_credit", //需修改
        //   title: "消费类型",
        //   type: "string",
        //   width: 100,
        //   align: "left",
        //   summary: true,
        // },
        {
          field: "customer_name",
          title: "客户姓名",
          type: "string",
          width: 100,
          align: "left",
        },
        {
          field: "customer_phone",
          title: "客户手机号",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "creator",
          title: "操作人",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          title: "操作",
          fixed: "right",
          width: 80,
          render: (h, { row, column, index }) => {
            return h("div", { style: {} }, [
              h(
                "a",
                {
                  on: {
                    click: (e) => {
                      this.modelExamine = true;
                      this.formFiledsvk.createDate = row.createDate;
                      this.formFiledsvk.internal_id_fk = row.internal_id_fk;
                      this.formFiledsvk.type_func = row.type_func;
                      this.formFiledsvk.amount_total = row.amount_total;
                      this.formFiledsvk.balance = row.balance;
                      this.formFiledsvk.customer_name = row.customer_name;
                      this.formFiledsvk.customer_phone = row.customer_phone;
                      this.formFiledsvk.creator = row.creator;
                      this.formFiledsvk.out_order_id = row.out_order_id;
                      this.formFiledsvk.notes = row.notes;
                    },
                  },
                },
                "查看"
              ),
            ]);
          },
        },
      ],
    };
  },
  methods: {
    open() {
      this.params.orderid = "";
      this.params.note = "";
      this.params.datetime = "";
      this.params.functype = "";
      this.params.start = 0;
      this.params.count = 30;
      this.AccountsGet();
    },
    // 列表接口
    AccountsGet() {
      if (this.params.datetime) {
        this.params.datetime = moment(this.params.datetime).format(
          "YYYY-MM-DD"
        );
      }
      this.http
        .post("/api/AccountsDetail/AccountsDetailGet", this.params, false)
        .then((res) => {
          if (!res.status) {
            this.$message.error("请求失败");
            this.loading = false;
            return;
          }
          this.tableData = res.data.detail;
          this.total = res.data.count;
          this.loading = false;

          // if (res.data.accounts.length > 0) {
          //   res.data.accounts.forEach((item) => {
          //     if (item.accoBalance) {
          //       this.$set(
          //         item.accMain,
          //         "balance_credit",
          //         item.accoBalance.balance_credit
          //       );
          //       this.$set(
          //         item.accMain,
          //         "balance_recharge",
          //         item.accoBalance.balance_recharge
          //       );
          //       this.$set(
          //         item.accMain,
          //         "balance_total",
          //         item.accoBalance.balance_total
          //       );
          //     }
          //     this.tableData.push(item.accMain);
          //   });
          // }
          // this.$nextTick(() => {
          //   this.pagingTotal = res.data.recordCount; //总条数
          //   this.$refs.table.paginations.total = res.data.recordCount;
          // });
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params = {
        start: 0,
        count: val,
      };
      this.AccountsGet();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.start = (val - 1) * this.params.count;
      this.AccountsGet();
    },

    // 查询按钮
    searchClick() {
      this.params.start = 0;
      this.params.count = 30;
      this.AccountsGet();
    },
    // 重置按钮
    resetSearch() {
      this.params.orderid = "";
      this.params.note = "";
      this.params.datetime = "";
      this.params.functype = "";
      this.params.start = 0;
      this.params.count = 30;
      this.AccountsGet();
    },

    load() {
      //此处可以自定义查询条件,如果不调用的框架的查询，格式需要自己定义，
      //如果查询的是框架getPageData方法,需要指定格式,如:
      // let where={wheres:[{"name":"UserTrueName","value":"教兽",displayType:"text"}]};
      //console.log(this.accountCode)

      let where = {
        wheres: [
          { name: "accountCode", value: this.accountCode, displayType: "text" },
          //设置为like模糊查询
          {
            name: "orderNumber",
            value: this.searchFields.UserName,
            displayType: "like",
          },
          //设置日期查询>=、<=
          {
            name: "startingTime",
            value: this.searchFields.CreateDate1,
            displayType: "thanorequal",
          },
          {
            name: "startingTime",
            value: this.searchFields.CreateDate2,
            displayType: "lessorequal",
          },
        ],
      };
      this.$refs.table.load(where);
    },
    del() {
      let rows = this.$refs.table.getSelected();
      if (rows.length == 0) {
        return this.$message.error("请先选中行");
      }
      this.$refs.table.delRow();
      //此处可以接着写删除后台的代码
    },
    getRows() {
      let rows = this.$refs.table.getSelected();
      if (rows.length == 0) {
        return this.$message.error("请先选中行");
      }
      let text = "当前选中的行数据：" + JSON.stringify(rows);
      this.$emit("getRows", rows);
      // this.$Message.info(text);
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  .paginat {
    text-align: center;
  }
}
</style>
